<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    v-for指令
        1.用于展示列表数据
        2.语法：v-for="(item,index) in xxx" key="index"
        3.可遍历：数组、对象、字符串、指定次数
    -->
    <div id="root">
      <!-- 这里遍历 value、index 顺序要注意和其他语言可能不一样 for in和for of都行 -->
      <!-- 遍历数组 -->
      <ul>
        <li v-for="(val,ind) in persons" :key="val.id">{{ind}} {{val.name}} {{val.age}}</li>
      </ul>

      <!-- 遍历对象 -->
      <ul>
        <li v-for="(val,k) in car" :key="k">{{val}} {{k}}</li>
      </ul>

      <!-- 遍历字符串 -->
      <ul>
        <li v-for="(val,ind) in str" :key="ind">{{val}} {{ind}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          persons: [
            { id: "001", name: "张三", age: 18 },
            { id: "002", name: "李四", age: 19 },
            { id: "003", name: "王五", age: 25 },
          ],
          car: {
            name: "奥迪A8",
            price: "70万",
            color: "黑色",
          },
          str: "hello",
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
